<!--
  模块：专项申报 - 首页
-->
<template>
  <div class="declare">
    <AppMainHeader>
      <el-row>
        <el-col :span="22">
          <!-- 查询表单 -->
          <DeclareQueryForm
            @query="handleQuery"
            :childrenOptions="statusOptions"
          />
        </el-col>
        <el-col :span="2" class="align-right">
          <el-button type="primary" @click="handleAdd">新增申报</el-button>
        </el-col>
      </el-row>
    </AppMainHeader>

    <AppMainContent>
      <!-- 分页表格 -->
      <DeclareQueryTable
        :children="declareList"
        @fetch="goTofetch"
        @update="goToUpdate"
      />
      <!-- 分页信息 -->
      <Pagination
        v-show="total > 0"
        :total="total"
        :current.sync="queryParams.currPage"
        :size.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </AppMainContent>
    <!-- 版权 -->
    <Copyright />
  </div>
</template>

<script>
  // 查询表单组件
  import DeclareQueryForm from './components/declare-query-form'

  // 专项申报的表格组件
  import DeclareQueryTable from './components/declare-query-table'

  // 增删改+分页
  import {
    pageDeclare,
    selectOptionData,
  } from '@/api/declare/index'

  // 版权
  import Copyright from '@/components/copyright'

  let pageParams = { pageNum: 1, pageSize: 10 }

  export default {
    name: 'Declare',
    components: { DeclareQueryForm, DeclareQueryTable, Copyright },
    data() {
      return {
        // 表单查询总数
        queryParams: { ...pageParams },
        // 总数据条数
        total: 0,
        // 分页表格
        declareList: [],
        // 状态的下拉菜单
        statusOptions: [],
      }
    },
    created() {
      this.getList()
      // 状态下拉列表
      this.getOptionsData()
    },
    methods: {
      // * 获取表格数据
      getList() {
        pageDeclare(this.queryParams).then((response) => {
          let { data = [], page = {} } = response
          let { currPage = 1, pageSize = 10, total = 0 } = page
          data.forEach((item, index) => {
            item.rowNumber = (currPage - 1) * pageSize + index + 1
          })
          this.declareList = data
          this.total = total
        })
      },
      // * 新增申报
      handleAdd() {
        this.$router.push('/declare/declareAdd')
      },
      // * 查询表单
      handleQuery(queryParams = {}) {
        this.queryParams = { ...queryParams, ...pageParams }
        this.getList()
      },
      // * 获取 状态 的下拉菜单
      getOptionsData() {
        selectOptionData().then((response) => {
          this.statusOptions = response.data
        })
      },
      // * 跳转详情页面
      goTofetch(val) {
        this.$router.push({
          path: '/declare/declareDetail',
          query: { id: val.id },
        })
      },
      // * 跳转修改页面
      goToUpdate(val) {
        this.$router.push({
          name: 'DeclareEdit',
          params: val,
        })
      },
    },
  }
</script>

<style scoped>
  .declare {
    height: 100%;
    overflow: scroll;
  }
</style>
